<template>
  <div>
    <div
      style="color: white;font-size: 22px;position: absolute;top: 115px;left: 67px;"
      @click="$router.push({path: '/Others'})"
    >
      <van-icon name="arrow-left" />
      <span style="position: absolute;width: 100px;top: -5px;left: 40px;">{{parkSubmoduleDescribe}}</span>
    </div>
    <div align="center">
      <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
        <div class="left" @click="onSwipeRight">
          <van-icon name="arrow-left" />
        </div>
        <div class="right" @click="onSwipeLeft">
          <van-icon name="arrow" />
        </div>
        <div style="position: absolute;top: 165px;left: 180px;right: 180px;">
          <van-row gutter="40" v-if="test == 1" class="a-fadeinL">
            <van-col span="8" v-for="(item,index) in list" :key="index">
              <img
                :src="item.parkSubmoduleUrl"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px; width:267px;height:173px"
                @click="getImg(index)"
              />
              <span
                style="color: white;font-size: 20px;display: block;padding: 10px 0px;"
              >{{item.parkSubmoduleDescribe}}</span>
            </van-col>
            <!-- <van-col span="8">
              <img
                src="../assets/e2.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(1)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯22</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e3.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(2)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯22</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e4.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(3)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e5.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(4)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e6.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(5)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>
          </van-row>
          <van-row gutter="40" v-if="test == 0" class="a-fadeinR">
            <van-col span="8">
              <img
                src="../assets/e1.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(0)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e2.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(1)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>
            <van-col span="8">
              <img
                src="../assets/e3.png"
                style="box-shadow: 5px 15px 10px rgb(28,32,44);border-radius: 10px;"
                @click="getImg(2)"
              />
              <span style="color: white;font-size: 20px;display: block;padding: 10px 0px;">园区资讯</span>
            </van-col>-->
          </van-row>
        </div>
      </v-touch>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
let _this;
export default {
  name: "OtherInf2",
  data() {
    return {
		images:[],
      list: [],
      test: 1,
      pid: "",
      current: 1,
      size: 6,
	  page: "",
	  parkSubmoduleDescribe:''
    };
  },
  beforeCreate() {
    // 创建 vue 实例之前
    _this = this;
  },
  watch: {},
  mounted() {
    console.log(this.$route.query.id);
    this.pid = this.$route.query.id;
    this.parkSubmoduleDescribe = this.$route.query.parkSubmoduleDescribe;
    this.getHonor();
  },
  methods: {
    onSwipeLeft() {
      // 左滑
      if (this.current < this.page) {
        this.current++;
        this.getHonor();
      }
      //   this.test = 0;
    },
    onSwipeRight() {
      // 右滑
      //   this.test = 1;
      if (this.current > 1) {
        this.current--;
        this.getHonor();
      }
    },
    getImg(index) {
      ImagePreview({
        // images: [
        //   require("../assets/e1.png"),
        //   require("../assets/e2.png"),
        //   require("../assets/e3.png"),
        //   require("../assets/e4.png"),
        //   require("../assets/e5.png"),
        //   require("../assets/e6.png")
		// ],
		images:this.images,
        startPosition: index
      });
    },
    async getHonor() {
      //   let params = this.qs.stringify({
      // 	pid : this.pid,
      //     current: this.current,
      //     size: this.size
      //   });
      // 	  let params = {
      // 	pid : this.pid,
      //     current: this.current,
      //     size: this.size
      //   };
      //   console.log(params);
      var res = await this.$http.get("/gxq/selectSubmoduleBySm", {
        params: {
          pid: this.pid,
          current: this.current,
          size: this.size
        }
      });
      console.log(res);
      let { code, data, msg } = res.data;
      if (code == 200) {
        this.list = data.records;
        this.images = data.records.map(item => {
          return item.parkSubmoduleUrl;
        });
        this.page = data.pages;
        console.log(this.page);
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-icon {
  font: 24px/1 "vant-icon";
}

/deep/ .van-row {
  margin-right: 0 !important;
}

.left /deep/ .van-icon {
  font: 48px/1 "vant-icon";
  color: rgb(56, 107, 146);
}

.left {
  position: absolute;
  top: 220px;
  left: 100px;
}

.right /deep/ .van-icon {
  font: 48px/1 "vant-icon";
  color: rgb(53, 86, 114);
}

.right {
  position: absolute;
  top: 450px;
  left: 100px;
}
</style>